<template>
    <div style="position: relative;">
      <div style="width: 15%; height: 880px; margin: 0px 0px; background-color: aliceblue; float: left;">
        <p style="background-color: aliceblue; margin: 0px 0px; padding: 20px 20px;">所有文档</p>
        <el-tree style="background-color: aliceblue; padding: 0px 10px;" :data="data.menuList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>   
      </div>

      <div style="width: 70%; height: auto; margin: 12px 50px; float: left;">
        <p style="font-size: 14px;color: #778299; margin-bottom: 40px;">  
          <a target="_blank" href="http://www.baidu.com" >
            <p style="margin: 0px 0px;">菜单A / 菜单B / 菜单C </p>
          </a> 
        </p>

        <div>
          <h2>标题asas</h2>
          <p style="height: 5px;font-size: 12px;color: #778299; margin-top: 0px; margin-bottom: 70px;">
            <span> 浏览次数：46 </span>
            <span> 更新时间：2023-01-01 </span>
          </p>
        </div>

        <div>
          <div v-html="data.html"> </div>
        </div>
      </div>

      <div style="width: 15%; height: 880px; margin: 0px 0px;  float: right;">
        <el-input style="margin: 20px 10px;width: 150px; border-radius: 20px;" prefix-icon="el-icon-search" v-model="d" placeholder="搜索"></el-input>
        <p style="margin: 0px 0px; padding: 10px 20px;">所有文档</p>
        <el-tree style="padding: 0px 10px;" :data="data.menuList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>   
      </div>
       
    </div>
</template>
   
<script>
import MarkdownEditor from '@/components/MarkdownEditor'
const content = `
**This is test**

* vue
* element
* webpack

`

const mm = `

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
	<h1>dsdssd</h1>
	<span>ssas</span>
</body>

</html>
`
export default {
  data() {
    return {
      data: {
        html:mm,
        menuList: [{
        label: '专题文章',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '开发者手册',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '用户手册',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }, {
        label: '常见问题',
        children: [{
          label: '二级 4-1',
          children: [{
            label: '三级 4-1-1'
          }]
        }, {
          label: '二级 4-2',
          children: [{
            label: '三级 4-2-1'
          }]
        }]
      }, {
        label: '更新',
        children: [{
          label: '二级 5-1',
          children: [{
            label: '三级 5-1-1'
          }]
        }, {
          label: '二级 5-2',
          children: [{
            label: '三级 5-2-1'
          }]
        }]
      }]
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  computed: {
    language() {
      return this.languageTypeList['en']
    }
  },
  methods: {
    getHtml() {
      this.html = this.$refs.markdownEditor.getHtml()
      console.log(this.html)
    }
  }
};
</script>

<style>
.el-tree-node__label{
  font-size: 16px;
}
.el-tree-node__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 36px;
    cursor: pointer;
}
</style>
  